import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
// import { Contact } from 'src/model/Contact';
import style from './Card.module.scss';

type Contact = any

type Props = {
  contactList: Contact[];
  onDelete: (id: string) => void;
};

const Card = ({ contactList, onDelete }: Props) => {
  const { t } = useTranslation();

  const elementMapFunction = (contact: Contact, index: number, array: Contact[]) => (
    <div key={contact.FID} className={style.item}>
      <div className={style.itemPadding}>
        <div>{contact.FType}</div>
        <div className={style.wrap}>{contact.FTag}</div>
        <div className={style.wrap}>
          {contact.FAddress}
          <span className={style.network}>{contact.FNet}</span>
        </div>
        <div className={style.deleteButton}>
          <Button
            appearance="text"
            className={style.deleteTextColor}
            onClick={() => onDelete(contact.FID)}
          >
            删除
          </Button>
        </div>
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
    </div>
  );

  return <div className={style.self}>{contactList.map(elementMapFunction)}</div>;
};

export default Card;
